<template>
 <div class="Mine-categories-swipe">
   <div class="publishInfo" v-show="!$attrs.isShow">
      <span class="leftinfo"></span>
      <div
        class="rightInfo"
        :style="{
          fontSize: $attrs.fontSizeModule,
          color: $attrs.backColorModule,
          fontWeight: $attrs.boldModule ? 'bold' : 'normal',
          fontStyle: $attrs.italicModule ? 'italic' : 'normal',
          textDecoration: $attrs.underlineModule ? 'underline' : 'none',
          textAlign: $attrs.textAlignModule,
          lineHeight: $attrs.lineHeightModule,
        }"
           >
        {{ $attrs.moduleName }}
      </div>
   </div>
    <van-swipe @change="onChange" :autoplay="$attrs.autoplay*1000" class="my-swipe" ref="myswipe"> 
        <van-swipe-item v-for="(item, index) in $attrs.imgList" :key="index" >
          <img :src="item.src" @click="imgTurn(item)"
            :style="{height:$attrs.height == 2 ? $attrs.heightSize+'px' : '100%' ,objectFit: $attrs.imageZoom == 1 ? 'fill' : $attrs.imageZoom == 2 ? 'contain' : 'cover'}"/>
          <div class="describe" v-show="item.describeSetting != 2" :style="{color: item.describeColor}">
            {{item.describe}}
          </div>
      </van-swipe-item>
    </van-swipe>
 </div>
</template>
<script>
import { ImagePreview } from 'vant';
export default {
  name:'vantSwipecontent',
  props:{},
  data(){
    return {
      current: 0,
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    imgTurn(val) {
      if(this.$attrs.isViweImg){
        ImagePreview({
        images:[val.src],
        closeable: true
      });
      }
      if(val.jumpType == 'function'){ //功能
        this.$emit('imgTurn', val.functionMenu,'function')
      }else if(val.jumpType == 'page'){ //页面
        this.$emit('imgTurn', val.jumpPath,'page')
      }
    },
  },
  mounted(){
   setTimeout(()=>{
     this.$refs.myswipe.resize();
   },0)
  }
}
</script>
<style lang="scss" scoped>
  img[src=""]{
    opacity: 0;
  }
  .describe{
    position: absolute;
    color:red;
    bottom: 0;
    font-size: 14px;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .publishInfo{
    display:flex;
    flex-wrap: nowrap;
    margin-bottom:15px;
    .leftinfo{
      width:3px;
      background:#1890FF;
      flex:none;
    }
    .rightInfo{
      flex:1;
      word-break: break-all;
      font-weight: bold;
      margin-left:6px;
      font-size: 16px;
    }
  }
  .my-swipe {
    height: calc(100% - 25px);
    width: 100%;
  }
  .my-swipe .van-swipe-item {
    width: 100%;
    color: #fff;
    font-size: 20px;
    height: 100%;
    text-align: center;
  }
  .Mine-categories-swipe{
    padding:10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .Mine-categories-swipe img{
    display: inline-block;
    width: 100%;
    height: 100%;
}
</style>

